<template>
    <div>
        <el-dialog :title="isAdd ? '添加角色' : '修改角色'" :visible.sync="zhe" :before-close="close">
            <el-form ref="form" :model="form" label-width="80px" :rules="rules">

                <el-form-item label="角色名称" prop="rolename">
                    <el-input v-model="form.rolename"></el-input>
                </el-form-item>


                <el-form-item label="角色权限">
                    <el-tree :data="$store.getters['menu/getMenu']" show-checkbox node-key="id" default-expand-all
                        :props="{ children: 'children', label: 'title' }" ref="tree">
                    </el-tree>
                </el-form-item>


                <el-form-item label="状态">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submit">确定</el-button>
                    <el-button @click="close">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
//引入接口
import { roleadd, roleinfo, roleedit } from "../../request/api"
export default {
    data() {
        return {
            // 定义数据
            form: {
                rolename: "",
                status: false,
                menus: "",
                id: 0

            },
            // 正则验证
            rules: {
                rolename: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ]
            },

        }
    },
    props: ["zhe", "isAdd"],
    methods: {
        //添加角色
        submit() {
            this.$refs.form.validate((val) => {
                // 如果val返回是真,就说明验证通过了
                if (val) {
                    // 因为后台请求过来的menus是数组类型,所以需要转成字符串
                    this.form.menus = this.$refs.tree.getCheckedKeys().join(",")
                    if (this.isAdd) {

                        // console.log(this.form);
                        roleadd(this.form).then(res => {
                            // console.log(res);
                            if (res.code == 200) {
                                this.$message(res.msg);
                                // 关闭
                                this.close()
                                // 重置
                                this.reset()
                                // 重新从仓库调用请求数据列表
                                this.$store.dispatch("role/getRoleActions")
                            }
                        })
                    } else {
                        roleedit(this.form).then(res => {
                            // console.log(res);
                            if (res.code == 200) {
                                this.$message(res.msg);
                                this.close()
                                this.reset()
                                this.$store.dispatch("role/getRoleActions")
                            }
                        })
                    }

                }
            })

        },
        // 关闭
        close() {
            this.$emit("close")
            this.reset()

        },
        // 重置
        reset() {
            this.$refs.form.resetFields()
            this.$refs.tree.setCheckedKeys([]);

        },
        // 获取单条数据
        lookup(id) {
            // console.log(id);
            roleinfo({ id }).then(res => {
                // console.log(res);
                if (res.code == 200) {
                    this.form = res.list
                    this.form.id = id
                    this.$refs.tree.setCheckedKeys(this.form.menus ? this.form.menus.split(",") : []);
                }
            })


        }
    },
    mounted() {
        // 减少对服务端发起请求，判断是否有请求
        if (this.$store.getters["menu/getMenu"].length == 0) {
            // 调用菜单行动
            this.$store.dispatch("menu/getMEnuListActions")
        }



        // this.$store.dispatch("role/getRoleActions")

    },

    watch: {},
    computed: {},
    filters: {},
    components: {}
}
</script>
<style scoped></style>
